<template>
    <el-row class="login-container" justify="center" :align="'middle'">
        <el-card>
            <template #header>
                <div class="card-header">
                    <img :src="imgUrl" alt="">
                </div>
            </template>
            <!-- <div class="jump-link">
                <el-link type="primary" @click="handleChange"> {{ formType ? '返回登陆' : '注册账号' }}</el-link>
            </div> -->
            <el-form :model="credentials" style="max-width: 600px;">
                <el-form-item prop="username">
                    <el-input v-model="credentials.account" placeholder="员工编号" :prefix-icon="UserFilled" clearable />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="credentials.password" placeholder="密码" :prefix-icon="Lock" clearable />
                </el-form-item>
                <!-- <el-form-item v-if="formType" prop="validCode">
                    <el-input v-model="loginForm.validCode" placeholder="验证码" :prefix-icon="UserFilled" clearable>
                        <template #append>
                            <span @click="countDownChange">{{ countDown.validText }}</span>
                        </template>
                    </el-input>

                </el-form-item> -->
                <el-form-item label="" size="normal">
                    <el-button type="primary" size="default" @click="handleLogin" :style="{ width: '100%' }">
                        登陆
                    </el-button>

                </el-form-item>

            </el-form>
        </el-card>
    </el-row>
</template>
<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
const imgUrl = new URL('../../../public/login-head.png', import.meta.url).href
const router = useRouter()
const route = useRoute()
const store = useStore()

const credentials = ref({
    account: '',
    password: ''
})

// const login = async () => {
//     // 这里可以调用登陆接口，然后获取token
//     localStorage.setItem('token', 'authToken')
//     console.log(route.meta)
//     const redirectPath = route.query.redirect || '/'
//     setTimeout(() => {
//         store.commit('addMenu', route.meta)
//     }, 100)
//     router.push(redirectPath)
//
// }

const handleLogin = async () => {
    try {
        const success = await store.dispatch('auth/login', credentials.value)
        if (success) {
            store.dispatch('auth/fetchUser')
            const redirectPath = route.query.redirect || '/dashboard'
            setTimeout(() => {
                store.commit('addMenu', route.meta)
            }, 100)
            router.push(redirectPath)
        }
    } catch (error) {
        // 处理错误
    }
}

const loginForm = reactive({
    username: '',
    password: '',
    validCode: ''
})

const countDown = reactive({
    validText: '获取验证码',
    time: 10
})
const submitForm = () => {

}

const validateUser = (rule, value, callback) => {
    if (value == '') {
        callback(new Error('请输入账号'))
    } else {
        const phoneReg = /^1\d{2}$/
        phoneReg.test(value) ? callback() : callback(new Error('手机号格式不对'))
    }
}

const rules = reactive({
    username: [{ validator: validateUser, trigger: 'blur' }]
})
let flag = false
const countDownChange = () => {
    if (flag) return
    flag = true
    countDown.time -= 1
    countDown.validText = `剩余${countDown.time}s`
    const time = setInterval(() => {
        countDown.time -= 1
        countDown.validText = `剩余${countDown.time}s`
        if (countDown.time <= 0) {
            countDown.time = 10
            countDown.validText = '获取验证码'
            flag = false
            clearInterval(time)
            return
        }
    }, 1000)
}
const formType = ref(0)
// 点击切换登录和注册
const handleChange = () => {
    formType.value = formType.value ? 0 : 1
}
</script>
<style lang="less">
:deep(.el-card__header) {
    padding: 0
}

.login-container {
    height: 100%;

    .card-header {
        background-color: #899fe1;

        img {
            width: 430px;
        }
    }

    .jump-link {
        text-align: right;
        margin-bottom: 10px;
    }
}
</style>
